<template>
  <el-card class="box-card">
    <div slot="header" class="clearfix">
      <span>更换头像</span>
    </div>
    <div>
      <!-- 图片，用来展示用户选择的头像 -->
      <img :src="imgUrl" v-if="imgUrl" alt="" class="preview"  width="100px"/>
      <img
        src="../../../assets/images/avatar.jpg"
        v-else
        alt=""
        class="preview"
      />

      <!-- 按钮区域 -->
      <!-- 1.需要用户上传头像,需要有一个能上传头像的输入框,这个输入框的类型就是files
           2.将这个按钮隐藏,通过点击选择图片button按钮,来触发input输入框
           3.给input框 注册一个change事件,来通过事件对象e,来拿到上传的图片名称,地址
       -->

      <div class="btn-box">
        <input
          type="file"
          style="display: none"
          ref="changeFile"
          @change="changeFile"
          width="100px"
        />
        <el-button
          type="primary"
          icon="el-icon-plus"
          @click="$refs.changeFile.click()"
          >选择图片</el-button
        >
        <!-- 上传偷偷有内容的时候就会接触禁用 -->
        <el-button
          type="success"
          icon="el-icon-upload"
          :disabled="imgUrl === ''"
          @click="updateImg"
          >上传头像</el-button
        >
      </div>
    </div>
  </el-card>
</template>

<script>
export default {
  name: "UserAvatar",
  data() {
    return {
      imgUrl: "",
    };
  },
  // 1.绑定更换头像事件
  // 2.发送更换头像请求
  // 3.清空input框内的内容
  // 4.重新渲染页面,就是重新调用请求数据接口
  methods: {
    async updateImg() {
      const { data: res } = await this.$http.patch("/my/update/avatar", {
        avatar: this.imgUrl,
      });
      // console.log(res);
      this.imgUrl = "";
      this.$store.dispatch("updateUserinfo");
    },

    // 上传用户头像到input框内
    changeFile(e) {
      // console.log(e.target.files);
      const files = e.target.files;
      if (files.length) {
        //  当用户上传了内容,就会触发下面的内容
        // console.log(files[0]);
        const reader = new FileReader();
        // 当图片转换为base64位,才能使用ajax上传头像
        reader.readAsDataURL(files[0]);
        reader.addEventListener("load", () => {
          this.imgUrl = reader.result;
        });
      } else {
        // 当没有上传内容，就是添加图片的时候，点击的是取消，就让图片恢复到以前的默认状态
        this.imgUrl = "";
      }
    },
  },
};
</script>

<style lang="less" scoped>
.btn-box {
  margin-top: 10px;
}
.preview {
  object-fit: cover;
  width: 350px;
  height: 350px;
}
</style>